<!-- 首页 -->
<template>
  <div class="home">
    <van-search
      shape="round"
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
    />
    <!-- 轮播图 -->
    <SwiperCom :banner ='banner'></SwiperCom>
    <!-- gold 居家-志趣组件 -->
    <Grid :channel="channel"></Grid>
    <!-- 品牌制造商直供 -->
    <Support v-if="brandList.length > 0"></Support>
    <!-- 周一周四新品首发 -->
    <Weekproduct
    :newGoodsList='newGoodsList'
    title="周一周四新品首发"
    ></Weekproduct>
    <!-- 专题精选 -->
    <van-swipe :loop="false" :width="300" :show-indicators="false">
      <van-swipe-item v-for="item in topicList" :key="item.id">
        <img :src="item.item_pic_url" alt="">
        <p class="vs_p">{{ item.title }}</p>
        <p class="vs_p">{{ item.subtitle }}</p>
      </van-swipe-item>
    </van-swipe>
    <!-- 产品列表 -->
    <Weekproduct
    v-for="item in categoryList"
    :key="item.id"
    :newGoodsList='newGoodsList'
    :title="item.name"
    ></Weekproduct>
  </div>
</template>

<script>
// 导入数据请求
import { getIndexList } from "@/http/http.js";

// 引入 grid 居家-志趣组件
import Grid from "@/components/Grid.vue"
// 导入轮播图组件
import SwiperCom from "@/components/SwiperCom";
import Support from "@/components/Support";
import Weekproduct from "@/components/Weekproduct";
export default {
  data() {
    return {
      value: "", // 搜索值
      banner: [], // 轮播图数组
      channel: [],
      brandList: [],
      newGoodsList: [],
      topicList: [],
      categoryList: [],
    };
  },
  components: {
    SwiperCom, // 注册组件
    Grid,
    Support,
    Weekproduct,
  },
  created() {
    // console.log(getIndexList);
    getIndexList().then((res) => {
      console.log(11, res);
      this.banner = res.data.data.banner;
      this.channel = res.data.data.channel;
      this.brandList = res.data.data.brandList;
      this.newGoodsList = res.data.data.newGoodsList;
      this.topicList = res.data.data.topicList;
      this.categoryList = res.data.data.categoryList;
    });
  },
  methods: {
    onSearch(val) {
      console.log(val);
    },
    onCancel() {
      console.log("取消");
    },
  },
};
</script>
<style scoped lang='less'>
/* @import url(); 引入css类 */
.home {
  width: 100%;
  height: 100%;
  padding-bottom: 50px;
  box-sizing: border-box;
  .van-swipe {
    img {
      width: 100%;
      height: 200px;
      display: block;
    }
  }
}
.vs_p {
  font-size: 16px;
}
</style>
